<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 经理</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">经理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/movies}">
        <i class="bi bi-film"></i>
        <span class="ms-1">电影列表</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active">
        <i class="bi bi-plus-square-fill"></i>
        <span class="ms-1">添加电影</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-camera-reels"></i>
        <span class="ms-1">放映管理</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link">
        <i class="bi bi-graph-up"></i>
        <span class="ms-1">销售数据</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/manager/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="container-fluid d-flex justify-content-center">
  <form class="card w-50 mt-2 p-3 d-flex flex-column gap-3" id="form">
    <div class="d-flex">
      <a class="btn btn-link" th:href="@{/manager/movies}">返回</a>
    </div>
    <div class="w-100 d-flex justify-content-center">
      <p class="h4">添加新的电影</p>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" placeholder="输入标题"
             id="titleInput" name="title">
      <label for="titleInput">标题</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" placeholder="输入导演"
             id="directorInput" name="director">
      <label for="directorInput">导演</label>
    </div>
    <div class="form-floating">
      <input type="text" class="form-control" placeholder="输入主演"
             id="starringInput" name="starring">
      <label for="starringInput">主演</label>
    </div>
    <div class="form-floating">
      <input type="number" class="form-control" placeholder="输入时长（分钟）"
             id="runtimeInput" name="runtime">
      <label for="runtimeInput">时长（分钟）</label>
    </div>
    <div class="form-floating">
      <textarea type="number" class="form-control" placeholder="输入剧情简介"
                style="height: 160px" id="descriptionInput" name="description"></textarea>
      <label for="descriptionInput">剧情简介</label>
    </div>
    <div class="d-flex gap-2">
      <button type="reset" class="btn btn-secondary flex-grow-1 p-2">重置</button>
      <button class="btn btn-primary flex-grow-1 p-2"
              type="submit" id="submitButton">提交</button>
    </div>
  </form>
</main>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
  const form = document.getElementById("form");
  const submitButton = document.getElementById("submitButton");

  async function submitForm() {
    const formData = new FormData(form);

    const data = {};
    formData.forEach((value, key) => {
      data[key] = value;
    });

    try {
      const response = await axios.post('/api/movies', data, {
        headers: {'Content-Type': 'application/json'}
      });

      if (response.status === 200) {
        alert("添加电影成功");
        const id = response.data.id;
        location.href = `/manager/movies/${id}`
      }
    } catch (error) {
      if (!error.response) {
        console.log(error);
      }
      else if (error.response.status === 400) {
        alert(error.response.data);
      }
    }
  }

  submitButton.addEventListener("click", event => {
    event.preventDefault();
    submitForm();
  });
</script>
</body>
</html>